<template>
	<Modal
		:mask-closable="false"
		v-model="createStatus"
		:title="type == 'check' ? '查看消息' : type == 'edit' ? '编辑消息' : '新建消息'"
		class="modal-content-item-layout pt16"
		@confirm="confirm"
		width="70%"
	>
		<div class="addProject">
			<Form ref="form" class="formList" :model="formItem" :rules="ruleValidate" :disabled="type == 'check'">
				<div class="content-item">
					<div class="pd16">
						<Row :gutter="20">
							<Col span="8">
								<FormItem label="模版类型" prop="templateType">
									<Select v-model="formItem.templateType" :placeholder="`${$t('common.selectInfo')}`" @on-change="modelTypeChange">
										<Option v-for="(item, index) of modelList" :value="item.value" :key="index" :label="item.label"> </Option>
									</Select>
								</FormItem>
							</Col>
							<Col span="8">
								<FormItem label="状态" prop="typeStatus">
									<Select v-model="formItem.typeStatus" :placeholder="`${$t('common.selectInfo')}`">
										<Option v-for="(item, index) in statusList" :value="item.value" :key="index" :label="item.value"> </Option>
									</Select>
								</FormItem>
							</Col>
							<Col span="8">
								<FormItem label="模板名称" prop="templateName">
									<Input icon="ios-clock-outline" v-model="formItem.templateName" />
								</FormItem>
							</Col>
						</Row>
						<Row :gutter="20">
							<Col span="8">
								<FormItem :label="$t('角色')" prop="multipleRoles">
									<Select
										ref="userSelect"
										v-model="formItem.multipleRoles"
										clearable
										multiple
										@on-change="roleChange"
										:disabled="disable == 'roleDisable'"
										:placeholder="`${$t('common.selectInfo')}`"
									>
										<Option v-for="item of roleArr" :value="item.id" :key="item.id" :label="item.name"> </Option>
									</Select>
								</FormItem>
							</Col>
							<Col span="8">
								<FormItem :label="$t('用户')" prop="multipleUser">
									<Select
										v-model="formItem.multipleUser"
										clearable
										multiple
										filterable
										@on-change="userChange"
										:disabled="disable == 'userDisable'"
										:max-tag-count="3"
										:remote-method="searchUserlist"
										:placeholder="`${$t('common.selectInfo')}`"
									>
										<Option v-for="item of userArr" :value="item.id" :key="item.id" :label="item.realname"> </Option>
									</Select>
								</FormItem>
							</Col>
							<Col span="8">
								<FormItem label="功能位置" prop="functionalLocation" v-if="[1,5,6,7].indexOf(formItem.templateType) !== -1">
									<Cascader clearable :data="orgList" v-model="formItem.functionalLocation" placeholder="请选择功能位置"> </Cascader>
								</FormItem>
							</Col>
						</Row>
						<Row :gutter="20">
							<Col span="24">
								<FormItem label="模板内容" prop="templateContent">
									<Input type="textarea" v-model="formItem.templateContent" :placeholder="`${$t('common.inputInfo')}`" />
								</FormItem>
							</Col>
						</Row>
						<Row :gutter="20">
							<Col span="24">
								<FormItem label="备注">
									<Input type="text" v-model="formItem.remarks" :placeholder="`${$t('common.inputInfo')}`" />
								</FormItem>
							</Col>
						</Row>
					</div>
				</div>
			</Form>
		</div>

		<div slot="footer">
			<Button type="default" @click="createStatus = false">{{ $t('common.Cancle') }}</Button>
			<Button type="primary" @click="addOk('form',2)">{{ $t('maintenance.Confirmed') }}</Button>
		</div>
	</Modal>
</template>

<script>
import { getStatusList } from './getStatusList.js';
import rulesMixins from './getValidatePass.js';

export default {
	name: 'addModal',
	mixins: [rulesMixins],
	data() {
		return {
			createStatus: false,
			addtitle: true,
			modelList: getStatusList(),
			formItem: {},
			statusList: [],
			ruleValidate: {
				templateType: [{ required: true, type: 'number', message: `${this.$t('common.selectInfo')}`, trigger: 'blur,change' }],
				typeStatus: [{ required: true, message: `${this.$t('common.selectInfo')}`, trigger: 'blur,change' }],
				multipleRoles: [{ validator: this.roleAndUserPass, trigger: 'blur,change'}],
				multipleUser: [{ validator: this.roleAndUserPass, trigger: 'blur,change' }],
				templateName: [{ required: true, message: '请输入模版名称', trigger: 'blur,change' }],
				templateContent: [{ required: true, message: '请输入模版内容', trigger: 'blur,change' }],
				functionalLocation: [{ required: true, message: '请选择位置',type: 'array', trigger: 'blur,change' }],

			},
			noticeDisable: '',
			type: '',
		};
	},
	mounted() {
		this.searchRole();
		this.searchUser();
	},
	methods: {
		show(row, type) {
			this.$refs.form.resetFields();
			this.formItem = {};
			if (row) {
				this.formItem = {
					...row,
				};
				this.statusList = getStatusList(row.templateType);
			}
			this.type = type;
			this.createStatus = true;
		},
		modelTypeChange(val) {
			this.formItem.templateType = val;
			this.statusList = getStatusList(val);
		},
	},
};
</script>

<style lang="scss" scoped></style>
